<ion-view title="Dashboard" class="dash">
  <ion-nav-title>
    <img src="img/logo.png" alt="Streama">
  </ion-nav-title>
  <ion-nav-buttons side="right">
    <button class="button button-icon button-clear ion-ios-search" ng-click="mainVm.toggleSearch()">
    </button>
  </ion-nav-buttons>

  <div class="dashboard-search-box item-input-inset" ng-show="mainVm.isSearchActive">
    <label class="item-input-wrapper input-dark">
      <i class="icon ion-ios-search placeholder-icon"></i>
      <input type="search" placeholder="Search Media..." ng-model="mainVm.searchQuery" ng-model-options="{debounce: 333}">
    </label>
    <button class="button button-clear button-light" ng-click="mainVm.toggleSearch()">
      Cancel
    </button>
  </div>

  <ion-content class="dashboard" ng-class="{'is-search-active': mainVm.isSearchActive}">
    <div class="full-page-spinner" ng-if="vm.isLoading">
      <ion-spinner  name="crescent" color="light"></ion-spinner>
    </div>

    <div ng-if="vm.newReleases.length && !mainVm.searchQuery && !vm.isLoading" class="new-releases-slider">
      <h3>{{'DASHBOARD.NEW_RELEASES' | translate}}</h3>

      <ion-slides options="vm.swiperHighlightOptions" slider="data.sliderHighlights" class="ion-slides-new-releases">
        <ion-slide-page ng-repeat="item in vm.newReleases">
          <div class="new-releases-slide">
            <img class="poster-image" ng-src="https://image.tmdb.org/t/p/w342/{{item.media.poster_path}}" class="pull-left">
            <div class="image-background" style="background-image: url('https://image.tmdb.org/t/p/w1280/{{item.media.backdrop_path}}')">
              <i class="info-icon ion-ios-information" ui-sref="main.mediaDetail({mediaId: item.media.id, mediaType: item.media.mediaType})"></i>
              <div class="new-release-footer">
                <a class="play-icon ion-ios-play" ui-sref="player({videoId: item.videoToPlayId})" ui-sref-opts="{reload: true, notify: true}"></a>
                <div class="new-releases-description">
                  <h3>
                    {{item.media.title || item.media.name}}
                    <span ng-if="item.media.release_date">({{item.media.release_date.substring(0,4)}})</span>
                  </h3>
                  <h4>{{item.description}}</h4>
                  <p class="text-overview">{{item.media.overview | streamaTextDotDotDot:100}}</p>
                </div>
              </div>
            </div>
          </div>
        </ion-slide-page>
      </ion-slides>
    </div>


    <div ng-show="((vm.continueWatchingList | filter:mainVm.searchQuery).length)" ng-if="!vm.isLoading">
      <h3>{{'DASHBOARD.CONTINUE_WATCHING' | translate}}</h3>

      <ion-slides options="vm.swiperOptions" slider="data.sliderContinueWatching" class="ion-slides-continue-watching">
        <ion-slide-page ng-repeat="item in vm.continueWatchingList | filter:mainVm.searchQuery as filteredContinueWatchingList">
          <streama-media-continue-watching-item item="item"></streama-media-continue-watching-item>
        </ion-slide-page>
      </ion-slides>
    </div>


    <!--<div owl-carousel="vm.continueWatchingList" owl-options="vm.carouselOptions">-->
      <!--<streama-media-continue-watching-item item="item"></streama-media-continue-watching-item>-->
    <!--</div>-->

   <div ng-show="vm.recommendations.length && ((vm.recommendations | filter:mainVm.searchQuery).length)" ng-if="!vm.isLoading">
     <h3>{{'DASHBOARD.RECOMMENDATIONS' | translate}}</h3>

     <ion-slides options="vm.swiperOptions" slider="data.sliderRecommendations" class="ion-slides-poster">
       <ion-slide-page ng-repeat="item in vm.recommendations | filter:mainVm.searchQuery">
         <streama-media-item item="item"></streama-media-item>
       </ion-slide-page>
     </ion-slides>
   </div>


    <div ng-if="$root.serverVersion && !mainVm.searchQuery && !vm.isLoading">
      <div ng-show="(vm.newestShow.list | filter:mainVm.searchQuery).length">
        <h3>
          {{'DASHBOARD.NEWEST_SHOWS' | translate}}
        </h3>

        <ion-slides options="vm.swiperOptions" slider="data.sliderTv" class="ion-slides-poster">
          <ion-slide-page ng-repeat="item in vm.newestShow.list | filter:mainVm.searchQuery">
            <streama-media-item item="item"></streama-media-item>
          </ion-slide-page>
        </ion-slides>
      </div>


      <div ng-show="(vm.newestMovie.list | filter:mainVm.searchQuery).length">
        <h3>
          {{'DASHBOARD.NEWEST_MOVIES' | translate}}
        </h3>

        <ion-slides options="vm.swiperOptions" slider="data.sliderTv" class="ion-slides-poster">
          <ion-slide-page ng-repeat="item in vm.newestMovie.list | filter:mainVm.searchQuery">
            <streama-media-item item="item"></streama-media-item>
          </ion-slide-page>
        </ion-slides>
      </div>


      <div ng-show="(vm.newestAddedShow.list | filter:mainVm.searchQuery).length">
        <h3>
          {{'DASHBOARD.NEWEST_ADDED_SHOWS' | translate}}
        </h3>

        <ion-slides options="vm.swiperOptions" slider="data.sliderTv" class="ion-slides-poster">
          <ion-slide-page ng-repeat="item in vm.newestAddedShow.list | filter:mainVm.searchQuery">
            <streama-media-item item="item"></streama-media-item>
          </ion-slide-page>
        </ion-slides>
      </div>


      <div ng-show="(vm.newestAddedMovie.list | filter:mainVm.searchQuery).length">
        <h3>
          {{'DASHBOARD.NEWEST_ADDED_MOVIES' | translate}}
        </h3>

        <ion-slides options="vm.swiperOptions" slider="data.sliderTv" class="ion-slides-poster">
          <ion-slide-page ng-repeat="item in vm.newestAddedMovie.list | filter:mainVm.searchQuery">
            <streama-media-item item="item"></streama-media-item>
          </ion-slide-page>
        </ion-slides>
      </div>
    </div>


    <div ng-show="(vm.show.list | filter:mainVm.searchQuery).length" ng-if="!vm.isLoading">
      <h3>
        {{'DASHBOARD.DISCOVER_SHOWS' | translate}}
        <video-sort-order-dropdown ng-if="$root.serverVersion" class="pull-right" ng-model="vm.show.sorter"
                                   ng-model-options="{getterSetter:true}" dropdown-type="'tvShow'"></video-sort-order-dropdown>
      </h3>

      <ion-slides options="vm.swiperOptions" slider="data.sliderTv" class="ion-slides-poster">
        <ion-slide-page ng-repeat="item in vm.show.list | filter:mainVm.searchQuery">
          <streama-media-item item="item"></streama-media-item>
        </ion-slide-page>
      </ion-slides>
    </div>

    <div ng-show="(vm.movie.list | filter:mainVm.searchQuery).length" ng-if="!vm.isLoading">
      <h3>
        {{'DASHBOARD.DISCOVER_MOVIES' | translate}}
        <video-sort-order-dropdown ng-if="$root.serverVersion" class="pull-right" ng-model="vm.movie.sorter"
                                   ng-model-options="{getterSetter:true}" dropdown-type="'movie'"></video-sort-order-dropdown>
      </h3>

      <ion-slides options="vm.swiperOptions" slider="data.sliderMovies" class="ion-slides-poster">
        <ion-slide-page ng-repeat="item in vm.movie.list | filter:mainVm.searchQuery">
          <streama-media-item item="item"></streama-media-item>
        </ion-slide-page>
      </ion-slides>

    </div>


    <div ng-show="(vm.genericVideo.list | filter:mainVm.searchQuery).length" ng-if="!vm.isLoading">
      <h3>
        {{'DASHBOARD.DISCOVER_OTHER_VIDEOS' | translate}}
        <video-sort-order-dropdown ng-if="$root.serverVersion" class="pull-right" ng-model="vm.genericVideo.sorter"
                                   ng-model-options="{getterSetter:true}" dropdown-type="'genericVideo'"></video-sort-order-dropdown>
      </h3>

      <ion-slides options="vm.swiperOptions" slider="data.sliderGenericVideos" class="ion-slides-poster">
        <ion-slide-page ng-repeat="item in vm.genericVideo.list | filter:mainVm.searchQuery">
          <streama-media-item item="item"></streama-media-item>
        </ion-slide-page>
      </ion-slides>
    </div>

  </ion-content>
</ion-view>
